<template>
  <div class="edit-reagent-board-table">
    <HcTable
      :data="testData"
      :row-class-name="getRowClassName"
      :border="true"
      :show-tableheader="false"
      :show-pagination="false"
      :dataTotal="testData.length * 10"
    >
      <el-table-column prop="孔位" label="孔位" />
      <el-table-column prop="试剂名称" label="试剂名称" />
      <el-table-column prop="Alle1" label="Alle1/通道" />
      <el-table-column prop="Alle2" label="Alle2/通道" />
    </HcTable>
  </div>
</template>

<script lang="ts" setup>
import HcTable from "/@/components/hc-table/index.vue";

const testData = [
  {
    孔位: "A1",
    试剂名称: "124666999JLK",
    Alle1: "0",
    Alle2: "0",
  },
  {
    孔位: "A2",
    试剂名称: "124666999JLK",
    Alle1: "0",
    Alle2: "0",
  },
  {
    孔位: "A3",
    试剂名称: "124666999JLK",
    Alle1: "48",
    Alle2: "48",
  },
  {
    孔位: "A4",
    试剂名称: "124666999JLK",
    Alle1: "-",
    Alle2: "-",
  },
  {
    孔位: "A5",
    试剂名称: "124666999JLK",
    Alle1: "96",
    Alle2: "96",
  },
];

const getRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
  if (rowIndex % 2 === 0) {
    return "edit-reagent-row-color";
  }
  return "edit-reagent-row-color-stripe";
};
</script>

<style lang="scss" scoped>
.edit-reagent-board-table {
  height: 100%;

  :deep(.edit-reagent-row-color) {
    background-color: #545a5d;
  }

  :deep(.edit-reagent-row-color-stripe) {
    background-color: #4b5153;
  }
}
</style>
